<template>
  <FIModel
    :title="type == 'insert' ? '新增目录' : '编辑目录'"
    width="600"
    v-model="showModel"
    @close="closeClick"
    @confirm="saveFunc(ruleFormRef)"
  >
    <el-form ref="ruleFormRef " :model="ruleForm" :rules="rules" label-width="100px" :size="formSize">
      <el-form-item label="目录编码" prop="key">
        <el-input v-model="ruleForm.key" placeholder="请输入目录编码"></el-input>
      </el-form-item>
      <el-form-item label="目录名称" prop="name">
        <el-input v-model="ruleForm.name" placeholder="目录名称"></el-input>
      </el-form-item>
      <el-form-item label="目录描述" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc" placeholder="目录描述"></el-input>
      </el-form-item>
      <!-- <el-button type="primary" @click="submitForm(ruleFormRef)"> Create </el-button> -->
    </el-form>
  </FIModel>
</template>
<script setup lang="ts">
import FIModel from '@/components/FIModel.vue'
import { onMounted, reactive, ref, watch } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { apiRequestPost } from '@/api/globalApi.js'
const props = defineProps({
  type: {
    type: String,
    default: '',
  },
  visible: {
    type: Boolean,
    default: false,
  },
  info: {
    type: Object,
    default: () => ({}),
  },
})
const emits = defineEmits(['close', 'update:visible', 'confirm', 'save-ok'])
const showModel = ref(props.visible)
watch(
  () => props.visible,
  (val) => {
    if (showModel.value !== val) {
      showModel.value = val
    }
  }
)

watch(
  () => showModel.value,
  (val) => {
    if (props.type !== 'insert') {
      ruleForm.key = props.info.key
      ruleForm.name = props.info.name
      ruleForm.desc = props.info.desc
    } else {
      ruleForm.key = ''
      ruleForm.name = ''
      ruleForm.desc = ''
    }
    // 只有值改变时才触发更新，避免无限循环
    if (val !== props.visible) {
      emits('update:visible', val)
    }
  }
)
interface RuleForm {
  key: string
  name: string
  desc: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive<RuleForm>({
  key: '',
  name: '',
  desc: '',
})
const rules = reactive<FormRules<RuleForm>>({
  key: [{ required: true, message: '请输入目录编码', trigger: 'blur' }],
  name: [
    {
      required: true,
      message: '请输入目录名称',
      trigger: 'blur',
    },
  ],
  desc: [
    {
      required: false,
      message: '请输入描述',
      trigger: 'blur',
    },
  ],
})
const closeClick = () => {
  emits('update:visible', false)
  emits('close')
}
const submitForm = async (formEl: FormInstance | undefined) => {
  console.log('submit!0001', formEl, ruleFormRef.value)
  console.log('submit!', formEl, ruleFormRef.value)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
const saveFunc = async (formEl: FormInstance | undefined) => {
  // if (!formEl) return
  // await formEl.validate((valid, fields) => {
  //   if (valid) {
  //     emits('update:visible', false)
  //     emits('confirm')
  //     const obj = {
  //       key: ruleForm.key,
  //       name: ruleForm.name,
  //       desc: ruleForm.desc,
  //       operateMode: props.type,
  //       id: props.info.id,
  //     }
  //     if (props.type == 'update') {
  //       obj.parentId = props.info.parentId
  //     } else {
  //       obj.parentId = props.info.id
  //     }
  //     console.log(obj, '-------rops.info----', props.info)
  //     apiRequestPost('/bpm-service/BpmCategory/saveCategoryInfo', obj)
  //       .then((res) => {
  //         if (res.data.success) {
  //           emits('save-ok', res.data)
  //           // infoFormType.value = 'info'
  //           // loadNode()
  //           // loadNode(selectedNodeObj.value)
  //         } else {
  //         }
  //       })
  //       .catch((error: any) => {
  //         // 处理错误
  //       })
  //   } else {
  //     console.log('error submit!', fields)
  //   }
  // })
  emits('update:visible', false)
  emits('confirm')
  const obj = {
    key: ruleForm.key,
    name: ruleForm.name,
    desc: ruleForm.desc,
    operateMode: props.type,
    id: props.info.id,
  }
  if (props.type == 'update') {
    obj.parentId = props.info.parentId
  } else {
    obj.parentId = props.info.id
  }
  console.log(obj, '-------rops.info----', props.info)
  apiRequestPost('/bpm-service/BpmCategory/saveCategoryInfo', obj)
    .then((res) => {
      if (res.data.success) {
        emits('save-ok', res.data)
        // infoFormType.value = 'info'
        // loadNode()
        // loadNode(selectedNodeObj.value)
      } else {
      }
    })
    .catch((error: any) => {
      // 处理错误
    })
}
onMounted(() => {
  console.log('-------rops.info----', props.info)
})
</script>
